<template>
  <div class="page">
    <div class="login-container">
      <h2 class="login-title">欢迎登录</h2>
      <el-form class="login-form" :model="formData">
        <el-form-item>
          <el-input
            v-model="phone"
            maxlength="11"
            placeholder="请输入手机号"
            prefix-icon="el-icon-mobile-phone"
            clearable
            type="number"
          />
        </el-form-item>

        <el-form-item v-if="!codeShow">
          <el-input
            v-model="pwd"
            type="password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            show-password
            clearable
          />
        </el-form-item>

        <el-form-item v-else>
          <el-input
            v-model="code"
            type="number"
            placeholder="请输入验证码"
            prefix-icon="el-icon-key"
            clearable
            @input="changeauthCd"
          >
            <el-button 
              slot="append" 
              type="primary" 
              :disabled="sending"
              @click="getCode"
            >
              {{ sending ? `重新发送(${time})` : '获取验证码' }}
            </el-button>
          </el-input>
        </el-form-item>
       
        <div class="login-type-switch">
          <span @click="showFeedbackDialog">
            问题反馈>>
          </span>
        </div>

        <el-form-item>
          <el-button 
            type="primary" 
            class="login-button" 
            @click="submit"
          >
            登录
          </el-button>
        </el-form-item>

        <div class="register-link">
          <span @click="goRegister">还没有账号？立即注册</span>
        </div>
      </el-form>
    </div>

    <!-- 问题反馈弹框 -->
    <el-dialog
      title="问题反馈"
      :visible.sync="feedbackVisible"
      width="90%"
      :show-close="false"
      custom-class="feedback-dialog"
    >
      <el-form>
        <el-form-item>
          <el-input
            type="textarea"
            v-model="feedbackContent"
            :rows="4"
            :maxlength="200"
            placeholder="请留下您的宝贵建议或意见..."
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="feedbackVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFeedback" :loading="submitting">
          提 交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setToken, getToken } from "@/api/auth";
import { loginPwd, login, sendPhoneCode, getLoginUserInfo } from "@/api/api";
export default {
  data() {
    return {
      codeShow: false,
      isOK: false,
      phone: "",
      pwd: "",
      code: "",
      sending: false,
      time: 60,
      depth: this.$route.query.depth ? this.$route.query.depth : "1",
      myreg: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
      feedbackVisible: false,
      feedbackContent: '',
      submitting: false,
    };
  },
  methods: {
    submit() {
      if (!this.myreg.test(this.phone)) {
        alert("手机号格式不正确！");
        return;
      }
      // 验证码登录
      if (this.codeShow) {
        const codedata = {
          phone: this.phone,
          code: this.code
        };
        login(codedata).then((res) => {
          if (res.code == 200) {
            if (res.data === "您尚未注册或注册申请尚未通过，请到注册页面查看！") {
              this.$vux.confirm.show({
                title: '提示',
                content: res.data,
                onConfirm: () => {
                  // 存储手机号，用于注册页面查询
                  window.localStorage.setItem("registerPhone", this.phone);
                  this.$router.push('/register');
                }
              });
            } else {
              this.$vux.toast.show("登录成功");
              setToken(res.data.token);
              window.localStorage.setItem("phone", this.phone);
              this.$store.commit("updateTabbarItemShow", 0);
              window.localStorage.removeItem("userInfo")
              this.$router.replace({
                path: "/"
              })
            }
          }
        });
      } else {
        if (this.pwd.length < 6 || this.pwd.length > 20) {
          alert("请输入6-20位密码！");
          return;
        }
        // 账号密码登录
        const data = { phone: this.phone, password: this.pwd };
        loginPwd(data).then((res) => {
          if (res.code == 200) {
            if (res.data === "您尚未注册或注册申请尚未通过，请到注册页面查看！") {
              this.$vux.confirm.show({
                title: '提示',
                content: res.data,
                onConfirm: () => {
                  window.localStorage.setItem("registerPhone", this.phone);
                  this.$router.push('/register');
                }
              });
            } else {
              this.$vux.toast.show("登录成功");
              setToken(res.data.token);
              window.localStorage.setItem("phone", this.phone);
              this.$store.commit("updateTabbarItemShow", 0);
              window.localStorage.removeItem("userInfo")
              this.$router.replace({
                path: "/"
              })
            }
          }
        });
      }
    },
    // getCode() {
    //   if (this.$route.query.code) {
    //     const code = this.$route.query.code;
    //     this.$api.user.getUserInfo(code).then((res) => {
    //       if (res.code === 200) {
    //         setToken(res.data.code);
    //       }
    //     });
    //   }
    // },

    changeauthCd() {
      if (this.code.length > 6) {
        this.code = this.code.slice(0, 6)
      }
    },
    getCode() {
      if (!this.phone) {
        alert("手机号不能为空");
        return;
      } else {
        if (!/^[1][3,4,5,6,7,8][0-9]{9}$/.test(this.phone)) {
          alert("请输入正确的手机号");
          return;
        }
      }
      const data = {
        phone: this.phone,
        type: "CODE",
      };
      sendPhoneCode(data).then((res) => {
        if (res.code == 200) {
          this.$vux.toast.show("发送成功");
          this.sending = true;
          this.countDown();
        }
      });
    },
    // 倒计时方法
    countDown() {
      if (this.time === 0) {
        this.sending = false;
        this.time = 60;
        return;
      } else {
        this.sending = true;
        this.time--;
      }
      setTimeout(() => {
        this.countDown();
      }, 1000);
    },
    emptyPhone() {
      this.phone = "";
    },
    emptyPwd() {
      this.pwd = "";
    },
    emptyCode() {
      this.code = "";
    },
    goRegister() {
      this.$router.push({
        path: "/register",
      });
    },
    goForgetpwd() {
      this.$router.push({
        path: "/forgetpwd",
      });
    },
    showFeedbackDialog() {
      this.feedbackVisible = true;
      this.feedbackContent = '';
    },
    async submitFeedback() {
      if (!this.feedbackContent.trim()) {
        this.$message.warning('请输入反馈内容');
        return;
      }
      
      try {
        this.submitting = true;
        // 模拟提交延迟
        setTimeout(() => {
          this.feedbackVisible = false;
          this.$message({
            type: 'success',
            message: '您的问题已提交，我们将进行优化，感谢您的反馈',
            duration: 3000
          });
        }, 500);
      } catch (error) {
        this.$message.error('提交失败，请稍后重试');
      } finally {
        this.submitting = false;
      }
    }
  },
  mounted() {
    // this.getCode();
  },
  name: "Login",
};
</script>

<style lang="less" scoped>
.page {
  min-height: 100vh;
  width: 100%;
  position: relative;
  background: url('~@/assets/img/login.png') no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .login-container {
    width: 85%;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 25px 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
    
    .login-title {
      text-align: center;
      color: #303133;
      margin-bottom: 25px;
      font-size: 20px;
      font-weight: 500;
    }
  }

  .login-form {
    box-sizing: border-box;
    margin-bottom: 15px;

    /deep/ .el-form-item {
      margin-bottom: 20px;

      .el-input {
        .el-input__inner {
          height: 40px;
          line-height: 40px;
          background: transparent;
          border: none;
          border-bottom: 1px solid #dcdfe6;
          border-radius: 0;
          padding-left: 30px;
          font-size: 14px;
          
          &:focus {
            border-color: #409EFF;
          }
        }
        
        .el-input__prefix {
          left: 0;
          color: #909399;
          
          i {
            font-size: 16px;
            line-height: 40px;
          }
        }
      }
    }

    .login-type-switch {
      text-align: right;
      margin-bottom: 15px;
      
      span {
        color: #409EFF;
        cursor: pointer;
        font-size: 14px;
        
        &:hover {
          color: #66b1ff;
          text-decoration: underline;
        }
      }
    }

    .login-button {
      width: 100%;
      height: 40px;
      font-size: 16px;
      background: linear-gradient(90deg, #409EFF, #66b1ff);
      border: none;
      
      &:hover {
        opacity: 0.9;
      }
    }

    .register-link {
      text-align: center;
      margin-top: 12px;
      
      span {
        color: #409EFF;
        cursor: pointer;
        font-size: 13px;
        
        &:hover {
          color: #66b1ff;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page {
    .login-container {
      width: 90%;
      padding: 20px 15px;
      
      .login-title {
        font-size: 18px;
        margin-bottom: 20px;
      }
      
      .login-form {
        /deep/ .el-form-item {
          margin-bottom: 15px;
        }
        
        .login-button {
          height: 38px;
          font-size: 15px;
        }
      }
    }
  }
}

.feedback-dialog {
  /deep/ .el-dialog__body {
    padding: 20px;
  }
  
  /deep/ .el-textarea__inner {
    background: #f7fafd;
    border: none;
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    
    &::placeholder {
      color: #999;
    }
  }
  
  .dialog-footer {
    text-align: center;
    padding-top: 10px;
  }
}

@media screen and (max-width: 768px) {
  .feedback-dialog {
    /deep/ .el-dialog {
      width: 90% !important;
      margin-top: 20vh !important;
    }
  }
}
</style>
